<template>
	<div class="myBookShelf">
		<HeaderTab>
			<div slot="left">
				<router-link to="/mine" class="glyphicon glyphicon-menu-left return_but"></router-link>
			</div>
			<div slot="center" class="header_center">
				我的书架
			</div>
		</HeaderTab>
		<div class="myBookShelf_box">
			<bookItem class="myBookShelf_new_style" v-for="(item, index) in items" :key="index" :book_items="item">
				<span slot="delbut"  class="glyphicon glyphicon-remove-sign delbut_new"></span>
			</bookItem>
		</div>
		<div class="myBookShelf_boxtip">----------------------已经到底了----------------------</div>
	</div>
</template>

<script>
	import HeaderTab from 'common/HeaderTab/HeaderTab.vue'
	import bookItem from 'views/DetailsPage/bookItem'
	import $ from 'jquery'
	
	export default {
		name: 'myBookShelf',
		components:{
			HeaderTab,
			bookItem
		},
		data() {
			return {
				items: [],
				book_items: [],
				userID: this.$store.state.userid
			}
		},
		methods: {
			mouseOn() {
				let arr = document.getElementsByClassName('bookItem');
				for (let i = 0; i < arr.length; i++) {
					arr[i].ontouchstart = function(){
						$(this).find('.delbut_new').css({'display':'block'});
						$(this).siblings('.bookItem').find('.delbut_new').css({'display':'none'})
					}
				}
			},
			
			delbut(){
				$('.delbut_new').click(function(){
					$(this).parent().css({'display':'none'});
				});
			},
			
			// 添加body图片
			setBodyBackGroundColor() {
				document.body.style.backgroundColor = 'rgb(245,245,246)'
			},
			
			// 清除背景图
			clearBodyBackGroundColor() {
				document.body.style.backgroundColor = 'rgb(255,255,255)'
			},
		
			// 加载我的收藏列表
			loadCollection(){
				this.axios.get('http://192.168.43.169/api/collection/' + this.userID).then((response) => {
					console.log(response.data.data);
					this.items = response.data.data
				});
			}
		},
		created() {
			this.loadCollection();
		},
		mounted() {
			this.mouseOn();
			this.delbut();
			// 进来的时候调用添加
			this.setBodyBackGroundColor();
		},
		beforeDestroy() {
			// 离开页面的时候清除
			this.clearBodyBackGroundColor()
		}
	}
</script>

<style>
	.myBookShelf_box{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 31px 10px;
		margin-top: 40px;
		background: url(../../../assets/img/backgroud_img/004.jpg) no-repeat;
		background-position: center center;
		/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
		background-attachment: fixed;
		/* 让背景图基于容器大小伸缩 */
		background-size: cover;

	}
	.myBookShelf_new_style{
		width: 30%;
		position: relative;
	}
	.delbut_new{
		color: crimson;
		font-size: 26px;
		position: absolute;
		top: 0;
		right: 0;
		background: #000000;
		border-radius: 50%;
		display: none;
	}
	.myBookShelf_boxtip{
		text-align: center;
	}
</style>
